Estoy consumiendo una API que devuelve json anidado. Es dinámico, por lo que las claves a menudo serán diferentes, pero solo pueden ser un objeto o una cadena, no pueden ser una matriz o un número, etc.
Aquí hay un ejemplo:
const response = { name: 'Pete', location: 'London', age: { year: '21' } }He intentado escribirlo así:
type Response = { [key: string]: string }Luego, en un componente React, quiero usarlo así:
type Response = { [key: string]: string } const Foo = ({ data }: Response) => { return <pre>{JSON.stringify(data, null, 2)}</pre> }Esto me da el siguiente error:
La propiedad 'x' no existe en el tipo 'cadena'
Puede alguien señalarme la dirección correcta?
aquí hay un enlace a stackblitz - https://stackblitz.com/edit/react-ts-4n7vcy?file=App.tsx
Lo que está haciendo es asignar el tipo de Response al argumento props de su componente funcional Foo . Entonces, en realidad, el componente Foo acepta un objeto props con el tipo de Response , pero la variable data se infiere como una cadena por mecanografiado. Lo que deberías hacer en su lugar es;
interface IFooProps{ data: Response; } const Foo = (props: IFooProps) => { return <pre>{JSON.stringify(props.data, null, 2)}</pre>; };El problema es que los valores en su tipo son cadenas. Cuando extrajo la clave data , su tipo era una cadena. Tienes que escribirlo como:
type Response = { data: { [key: string]: string } }O aceptarlo en el componente como
const Foo = (data: Response) => { // ... }Si desea que los valores sean cadenas u objetos anidados, puede hacer lo siguiente:
type Response = { [key: string]: string | Response } Y luego los data en su ejemplo serán de tipo string | Response